<script setup lang="ts">
/* -------------- 5. 生命周期钩子 -------------- */
import {
    onBeforeMount,
    onBeforeUnmount,
    onMounted,
    onUnmounted,
    onUpdated,
    onActivated,
    onBeforeUpdate,
    onDeactivated,
    onErrorCaptured,
} from 'vue';

console.log('[setup] 同步执行，此时组件实例已创建，但尚未挂载');

onBeforeMount(() => console.log('[onBeforeMount] 挂载前，DOM 还未生成'));
onMounted(() => console.log('[onMounted] 挂载完成，DOM 已生成'));

onBeforeUpdate(() =>
    console.log('[onBeforeUpdate] 数据改变，DOM 尚未重新渲染'),
);
onUpdated(() => console.log('[onUpdated] DOM 重新渲染完成'));

onBeforeUnmount(() => console.log('[onBeforeUnmount] 卸载前，DOM 还存在'));
onUnmounted(() => console.log('[onUnmounted] 卸载完成，DOM 已销毁'));

/* -------------- 6. 仅对 KeepAlive 有用 -------------- */
onActivated(() => console.log('[onActivated] 被 KeepAlive 缓存后激活'));
onDeactivated(() => console.log('[onDeactivated] 被 KeepAlive 缓存后失活'));

/* -------------- 7. 错误捕获 -------------- */
onErrorCaptured((err, instance, info) => {
    console.warn('[onErrorCaptured]', err, info, instance);
    return true; // 返回 true 阻止错误继续向上传播
});
</script>

<template>
    <div>请看控制台的输出</div>
</template>

<style scoped lang="scss"></style>
